<template>
  <div v-if="exam">
    <h1 style="white-space: pre-wrap">{{ exam.examTitle }} {{ "             总分："}} {{ exam.allScore }}</h1>
    <p>{{ exam.description }}</p>
    <el-button @click="correct">
      正确答案
    </el-button>
    <el-form>
      <el-form-item
          v-for="(question, index) in exam.questions"
          :key="index"
          style="font-size: 10px"
      >
        <h3> {{ question.content }} </h3>
        <el-radio-group v-if="question.questionType === 'judgment'" v-model="question.answer" disabled>
          <el-radio style="font-weight: bold" :label="true" value="true"> 正确 </el-radio>
          <el-radio style="font-weight: bold" :label="false" value="false"> 错误 </el-radio>
        </el-radio-group>
        <el-radio-group size="large" v-if="question.questionType === 'single'" v-model="question.answer" disabled>
          <el-radio
              v-for="(option, i) in question.optionList"
              :key="i"
              :label="getOptionLabel(i)"
              style="font-weight: bold"
              >{{ getOptionLabel(i) }} . {{ option.option }}</el-radio>
        </el-radio-group>
        <el-checkbox-group size="large" v-if="question.questionType === 'multiple'" v-model="question.answerList" disabled>
          <el-checkbox
              v-for="(option, i) in question.optionList"
              :key="i"
              :label="getOptionLabel(i)"
              style="font-weight: bold"
          >{{ getOptionLabel(i) }} . {{ option.option }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeMount, reactive} from 'vue';
import examAPI from "@/api/module/exam";
import {useRoute, useRouter} from "vue-router";

const router = useRoute()
const route = useRouter();

let exam=ref(null);


onMounted(async () => {
  let examId = router.query.examId;
  await getDetails(examId);
})

const getDetails =  async (id) => {
  await examAPI.detail(id).then((res) => {
    exam.value = res.data;
    if(exam.value.questions.length > 0){
      exam.value.questions.forEach(question => {
        if(question.questionType === 'single' || question.questionType === 'multiple'){
          question.optionList =  JSON.parse(question.options);
          if(null != question.answer){
            question.answerList = question.answer.split(',');
          }
        }
      })
    }
  }).catch((err) => {
    console.log(err)
  });
}

const getOptionLabel = (index) => {
  return String.fromCharCode(65 + index);
}

const correct =  () => {
  let examId = router.query.examId;
  route.push({
    path:'/examCorrect',
    query:{
      "examId": examId
    }
  });
}
</script>

<style scoped>
::v-deep .el-radio__label {
  font-size: 16px;
  color: #333;
}

::v-deep .el-radio__input.is-checked  + .el-radio__label {
  color: #409EFF;
}

::v-deep .el-radio__input.is-checked  .el-radio__inner {
  background: #409EFF;
  border-color: #409EFF;
}

::v-deep .el-checkbox__label {
  font-size: 16px;
  color: #333;
}

::v-deep .el-checkbox__input.is-checked  + .el-checkbox__label {
  color: #409EFF;
}

::v-deep .el-checkbox__input.is-checked  .el-checkbox__label {
  background: #409EFF;
  border-color: #409EFF;
}
</style>